<template>
	<view class="shipping-address-container">

		
		<!-- 地址列表 -->
		<view v-if="addressList.length > 0" class="address-list">
			<view 
				v-for="(address, index) in addressList" 
				:key="index" 
				class="address-item"
				@click="selectAddress(address)"
			>
				<view class="address-info">
					<view class="user-info">
						<text class="name">{{ address.receiver_name }}</text>
						<text class="phone">{{ address.receiver_phone }}</text>
					</view>
					<view class="address-tags">
						<text v-if="address.is_default" class="default-tag">默认</text>
					</view>
					<view class="address-detail">
						<text class="address-text">{{ address.province }}{{ address.city }}{{ address.district }}{{ address.street }}</text>
					</view>
					<view class="address-actions">
						<view v-if="!address.is_default" class="action-btn" @click.stop="setDefaultAddress(address)">
							<text class="action-text">设为默认</text>
						</view>
						<view class="action-btn delete-btn" @click.stop="deleteAddress(address)">
							<text class="action-text">删除</text>
						</view>
					</view>
				</view>
				<view class="edit-btn" @click.stop="editAddress(address)">
					<uni-icons type="compose" size="20" color="#999999"></uni-icons>
				</view>
			</view>
		</view>
		
		<!-- 空状态 -->
		<view v-else class="empty-state">
			<view class="empty-icon">
				<uni-icons type="location" size="80" color="#cccccc"></uni-icons>
				<view class="plus-icon">
					<uni-icons type="plus" size="20" color="#cccccc"></uni-icons>
				</view>
			</view>
			<view class="empty-text">
				<text class="empty-title">1个收货地址也没有，</text>
				<text class="empty-subtitle">快去添加收货地址买买买吧</text>
			</view>
		</view>
		
		<!-- 添加地址按钮 -->
		<view class="add-address-btn" @click="addNewAddress">
			<uni-icons type="plus" size="20" color="#ffffff"></uni-icons>
			<text class="btn-text">新建收货地址</text>
		</view>
	</view>
</template>

<script>
	import shippingAddressApi from '@/utils/api/shippingAddress.js'
	import apiDebugger from '@/utils/api-debugger.js'
	
	export default {
		data() {
			return {
				addressList: [],
				loading: false
			}
		},
		onLoad() {
			this.loadAddressList()
		},
		onShow() {
			// 每次显示页面时重新加载地址列表
			this.loadAddressList()
		},
		methods: {
			/**
			 * 加载收货地址列表
			 */
			async loadAddressList() {
				try {
					this.loading = true
					uni.showLoading({ title: '加载中...' })
					
					// 调用用户端接口获取地址列表
					const result = await shippingAddressApi.getUserAddresses()
					
					if (result.success) {
						this.addressList = result.data || []
						// 调试：打印地址数据
						console.log('✅ 获取到的地址列表:', this.addressList)
						console.log('📊 地址数量:', this.addressList.length)
						
						// 检查地址数据格式
						if (this.addressList.length > 0) {
							console.log('📋 第一条地址数据:', this.addressList[0])
							console.log('🔍 地址字段列表:', Object.keys(this.addressList[0]))
						}
					} else {
						console.error('❌ 获取地址列表失败:', result.message)
					}
				} catch (error) {
					console.error('加载地址列表失败:', error)
				} finally {
					this.loading = false
					uni.hideLoading()
				}
			},
			
			/**
			 * 选择地址
			 */
			selectAddress(address) {
				// 选择地址逻辑
				console.log('选择地址:', address)
				// 这里可以根据业务需求处理地址选择
			},
			
			/**
			 * 编辑地址
			 */
			editAddress(address) {
				uni.navigateTo({
					url: `/pages/kzMyShippingAddress/kzEditShippingAddress?id=${address.id}`
				})
			},
			
			/**
			 * 添加新地址
			 */
			addNewAddress() {
				uni.navigateTo({
					url: '/pages/kzMyShippingAddress/kzAddShippingAddress'
				})
			},
			
			/**
			 * 删除地址
			 */
			async deleteAddress(address) {
				uni.showModal({
					title: '确认删除',
					content: '确定要删除这个收货地址吗？',
					success: async (res) => {
						if (res.confirm) {
							try {
								uni.showLoading({ title: '删除中...' })
								
								const result = await shippingAddressApi.deleteAddress(address.id)
								
								if (result.success) {
									// 重新加载地址列表
									this.loadAddressList()
								}
							} catch (error) {
								console.error('删除地址失败:', error)
							} finally {
								uni.hideLoading()
							}
						}
					}
				})
			},
			
			/**
			 * 设置默认地址
			 */
			async setDefaultAddress(address) {
				try {
					uni.showLoading({ title: '设置中...' })
					
					const result = await shippingAddressApi.setDefaultAddress(address.id)
					
					if (result.success) {
						// 重新加载地址列表
						this.loadAddressList()
					}
				} catch (error) {
					console.error('设置默认地址失败:', error)
				} finally {
					uni.hideLoading()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.shipping-address-container {
	min-height: 100vh;
	background-color: #f5f5f5;
	
	.address-list {
		padding: 10rpx 20rpx;
		
		.address-item {
			background-color: #ffffff;
			border-radius: 12rpx;
			padding: 30rpx 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			
			.address-info {
				flex: 1;
				
				.user-info {
					margin-bottom: 15rpx;
					
					.name {
						font-size: 32rpx;
						color: #333333;
						margin-right: 20rpx;
					}
					
					.phone {
						font-size: 28rpx;
						color: #333333;
					}
				}
				
				.address-tags {
					margin-bottom: 15rpx;
					
					.default-tag {
						background-color: #ff4444;
						color: #ffffff;
						font-size: 24rpx;
						padding: 4rpx 12rpx;
						border-radius: 8rpx;
					}
				}
				
				.address-detail {
					.address-text {
						font-size: 28rpx;
						color: #666666;
						line-height: 1.5;
					}
				}
				
				.address-actions {
					display: flex;
					align-items: center;
					margin-top: 15rpx;
					
					.action-btn {
						margin-right: 20rpx;
						padding: 8rpx 16rpx;
						border-radius: 8rpx;
						background-color: #f5f5f5;
						
						.action-text {
							font-size: 24rpx;
							color: #666666;
						}
						
						&.delete-btn {
							background-color: #ffebee;
							
							.action-text {
								color: #f44336;
							}
						}
					}
				}
			}
			
			.edit-btn {
				padding: 10rpx;
			}
		}
	}
	
	.empty-state {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 200rpx;
		
		.empty-icon {
			position: relative;
			margin-bottom: 40rpx;
			
			.plus-icon {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
			}
		}
		
		.empty-text {
			text-align: center;
			margin-bottom: 60rpx;
			
			.empty-title {
				display: block;
				font-size: 32rpx;
				color: #666666;
				margin-bottom: 10rpx;
			}
			
			.empty-subtitle {
				display: block;
				font-size: 28rpx;
				color: #999999;
			}
		}
	}
	
	.add-address-btn {
		position: fixed;
		bottom: 40rpx;
		left: 40rpx;
		right: 40rpx;
		height: 88rpx;
		background-color: #ff4444;
		border-radius: 44rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4rpx 12rpx rgba(255, 68, 68, 0.3);
		
		.btn-text {
			color: #ffffff;
			font-size: 32rpx;
			margin-left: 10rpx;
		}
	}
}
</style>
